use leptos::*;
use leptos_router::*;

#[component]
pub fn Ttm() -> impl IntoView {
    view! {
        <Router>
            <h1 class="text-2xl">该吃药了</h1>
            <main>
                <Routes>
                    <Route
                        path="/"
                        view=TtmForm
                      >
                    </Route>
                </Routes>
            </main>
        </Router>
    }
}

#[component]
fn TtmForm() -> impl IntoView {
    // we can access the :id param reactively with `use_params_map`
    // let params = use_params_map();
    let params = use_query_map();
    let id = move || params.with(|params| params.get("id").cloned().unwrap_or_default());

    // imagine we're loading data from an API here
    let id = move || match id().as_str() {
        "123480123406234" => "123480123406234",
        _ => "需要提供手表标识号.",
    };
    view! {
        <Form method="" action="">
            <label class="block mt-8 mb-8 text-sm font-medium text-gray-900">
                "您的标识号："{id}
            </label>
            <label for="message" class="block mb-2 text-sm font-medium text-gray-900">
                "描述一条吃药提醒："
            </label>
            <textarea id="message" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" placeholder="示例：提醒我今天中午服用阿司匹林一片。请分析上面这句话中的时间、药品名称、服用数量，分别打印出来。">
            </textarea>
            <input type="submit" value="提交给 AI 分析"
                class="block mx-auto my-4 p-2 rounded-md bg-slate-300"
            />
        </Form>
        <Form method="" action="">
            <label for="result" class="block mb-2 text-sm font-medium text-gray-900">
                "分析结果："
            </label>
            <textarea id="result" rows="4" class="block p-2.5 w-full
                text-sm text-gray-900 bg-gray-50 rounded-lg border
                border-gray-300 focus:ring-blue-500 focus:border-blue-500"
                placeholder="示例：
                    药品名称：阿司匹林
                    服用数量：一片
                    时间：今天中午">
            </textarea>
            <input type="submit" value="提交到 vivo 手表"
                class="block mx-auto my-4 p-2 rounded-md bg-slate-300"
            />
        </Form>
        <div class="">
            <Outlet/>
        </div>
    }
}
